<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-03-06 14:14:11
 * @LastEditTime: 2023-03-06 15:47:21
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\product\components\classifyEdit.vue
-->
<template>
  <div class="classify">
    <el-dialog draggable v-model="dialog.show" width="600px" :before-close="handleClose" class="custom-dialog">
      <template #header> {{ props.editData.id ? '修改' : '新增' }}分类 </template>
      <el-form :model="forms" ref="registerRef" :rules="rules" label-width="100" class="dis-flex flex-dir-column flex-center">
        <el-form-item label="名称" prop="categoryName">
          <el-input v-model="forms.categoryName" placeholder="分类名称" autofocus clearable class="width-220"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" prop="categoryParentId">
          <el-tree-select
            v-model="forms.categoryParentId"
            default-expand-all
            highlight-current
            check-strictly
            :data="props.classifyOptions"
            placeholder="选择上级分类"
            class="width-220"
          >
          </el-tree-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <z-button type="" @click="handleClose" icon="close">取消</z-button>
          <z-button icon="check" @click="onCheck" :loading="dialog.loading"> 确认 </z-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { post } from '@/api/index';
let $message = inject('$message');
let emit = defineEmits(['update:modelValue', 'onSave']);
let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  classifyOptions: {
    type: Array,
    default: () => {
      return [];
    }
  },
  editData: {
    type: Array,
    default: () => {
      return [];
    }
  }
});
let registerRef = ref();
let dialog = reactive({
  show: false,
  options: [],
  loading: false
});
let formsInit = () => {
  return reactive({
    categoryName: '',
    categoryParentId: 0,
    id: 0
  });
};
let forms = formsInit();
let rules = {
  categoryName: [{ required: true, trigger: 'blur', message: '分类名称不能为空!' }],
  categoryParentId: [{ required: true, trigger: 'blur', message: '必须选择上级分类!' }]
};
watch(
  () => props.modelValue,
  val => {
    dialog.show = val;
    if (!val) return;
    const formData = formsInit();
    Object.keys(formData).map(r => {
      forms[r] = props.editData[r] != undefined ? props.editData[r] : formData[r];
    });
  },
  {
    immediate: true
  }
);
const handleClose = () => {
  emit('update:modelValue', false);
};
const onCheck = () => {
  if (!registerRef.value) return;
  registerRef.value.validate(async val => {
    if (!val) return;
    try {
      dialog.loading = true;
      await post('Category/CreateOrUpdate', forms);
      $message.success('编辑成功');
      dialog.loading = false;
      emit('onSave');
    } catch (error) {
      console.log('Category/CreateOrUpdate错误', error);
      dialog.loading = false;
    }
  });
};
</script>

<style lang="scss" scoped>
.classify {
  :deep(.custom-dialog) {
    .el-dialog__body {
      height: 200px;
    }
  }
}
</style>
